<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="edu-tabs">
            <el-tab-pane label="年级设置" name="first"></el-tab-pane>
            <el-tab-pane label="科目设置" name="second"></el-tab-pane>
            <el-tab-pane label="上课时长" name="third"></el-tab-pane>
            <el-tab-pane label="招生来源" name="fourth"></el-tab-pane>
            <el-tab-pane label="意向沟通方式" name="fifth"></el-tab-pane>
            <el-tab-pane label="学员缺勤原因" name="sixth"></el-tab-pane>
        </el-tabs>
        <div class="top-banner-back"><el-button type="primary" @click="dialogFormShow()">新增</el-button></div>
        <div class="edu-table-lr">
            <el-table :data="tableData">
                <el-table-column prop="sort" label="排序" ></el-table-column>
                <el-table-column :prop="tabIndex == 0?'gradeName':tabIndex == 1?'subjectName':tabIndex == 2?'classTime':tabIndex == 3?'admissionsFrom':tabIndex == 4?'communicateType':'holidayType'" 
                :label="tabIndex == 0?'年级':tabIndex == 1?'科目':tabIndex == 2?'上课时长(分钟)':tabIndex == 3?'招生来源':tabIndex == 4?'意向沟通方式':'学员缺勤原因'">
                </el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" @click="dialogFormShow(scope.row.id)">编辑</el-button>
                        <el-button type="info" plain size="mini" @click="deleteItems(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="edu-pagination">
            <el-pagination background v-if="pageCount>1"
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="rowCount">
            </el-pagination>
        </div>

        <!-- 新增弹出层 -->
        <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" :before-close='dialogFormReset' class="width600">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
                <el-form-item :label="dialogFormLabel" required 
                :prop="tabIndex == 0?'gradeName':tabIndex == 1?'subjectName':tabIndex == 2?'classTime':tabIndex == 3?'admissionsFrom':tabIndex == 4?'communicateType':'holidayType'"
                class="gradeNameError">
                    <el-input v-model="ruleForm.gradeName" class="width414" v-if="tabIndex == 0"></el-input>
                    <el-input v-model="ruleForm.subjectName" class="width414" v-if="tabIndex == 1"></el-input>
                    <el-input v-model.number="ruleForm.classTime" class="width414" v-if="tabIndex == 2" type="number"></el-input>
                    <el-input v-model="ruleForm.admissionsFrom" class="width414" v-if="tabIndex == 3"></el-input>
                    <el-input v-model="ruleForm.communicateType" class="width414" v-if="tabIndex == 4"></el-input>
                    <el-input v-model="ruleForm.holidayType" class="width414" v-if="tabIndex == 5"></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="sort" required>
                    <el-input type="number" v-model.number="ruleForm.sort" class="width414"></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input  type="textarea" :rows="2" v-model="ruleForm.remarks" class="width414"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormReset()">取 消</el-button>
                <el-button type="primary" @click="dialogFormSubmit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import common from "@/assets/js/common.js";
  export default {
    data() {
        var validateGradeName = (rule,value,callback) => {
            let that = this
            if(value == '' || !value){
                if(that.tabIndex === '0'){
                    callback(new Error('请输入年级'));
                }else if(that.tabIndex === '1'){
                    callback(new Error('请输入科目'));
                }else if(that.tabIndex === '2'){
                    callback(new Error('请输入上课时长'));
                }else if(that.tabIndex === '3'){
                    callback(new Error('请输入招生来源'));
                }else if(that.tabIndex === '4'){
                    callback(new Error('请输入意向沟通方式'));
                }else if(that.tabIndex === '5'){
                    callback(new Error('请输入学员缺勤原因'));
                }   
            }else{
                callback()
            }
        }
        var checkSort = (rule, value, callback)=>{
            if(Number.isInteger(value)){
                callback();
            }else{
                return callback(new Error('请输入0~99以内的数字，数字越小越靠前'));
            }
        }
      return {
        activeName: 'first',
        tabIndex:'0',
        dialogFormTitle:'新增年级',
        dialogFormLabel:'年级',
        tableData:[],
          currentPage:1,
          dialogFormVisible: false,
          formLabelWidth:'70px',
          ruleForm:{
              gradeName:'',
              sort:0,
              remarks:''
          },
          gradeNameError:'请选择活动区域',
          rules:{
              gradeName:[
                  { validator: validateGradeName}
              ],
              subjectName:[
                  { validator: validateGradeName}
              ],
              classTime:[
                  { validator: validateGradeName},
                  {  min: 0,type:'number', message: '请输入正确的上课时长'}
              ],
              admissionsFrom:[
                  { validator: validateGradeName},
              ],
              communicateType:[
                   { validator: validateGradeName},
              ],
              holidayType :[
                   { validator: validateGradeName},
              ],
              sort:[
                { min: 0, max: 99, type:'number', message: '请输入0~99之间的数字，数字越小越前'},
                { validator: checkSort }
              ]
          },
          curPage:1,
          pageSize:10,
          pageCount:1,
          rowCount:10,
          url:'',
          id:''

      };
    },
    methods: {
        loadData(curPage,url){
            let that = this;
            common.ajax({
                'url': url,
                'type': "GET",
                'data':{curPage:curPage},
                'success': function(data) {
                    console.log(data,'查询校区数据');
                    if (data.data) {
                        that.tableData = data.data.subList
                        that.pageSize = data.data.pageSize
                        that.pageCount = data.data.pageCount
                        that.rowCount = data.data.rowCount
                    }else{
                        that.tableData = []
                    }
                }
            });
        },

        //tab 点击事件
        loadDataChange(){
            let that = this
            if(that.tabIndex == 0){
                //年级设置
                that.loadData(that.curPage,eduAPI.activeAPI.findGradeList)
            }else if(that.tabIndex == 1){
                // 科目设置
                that.loadData(that.curPage,eduAPI.activeAPI.findSubjectList)
            }else if(that.tabIndex == 2){
                //上课时长
                that.loadData(that.curPage,eduAPI.activeAPI.findClassTimeList)
            }else if(that.tabIndex == 3){
                //招生来源
                that.loadData(that.curPage,eduAPI.activeAPI.findAdmissionsFromList)
            }else if(that.tabIndex == 4){
                //意向沟通方式
                that.loadData(that.curPage,eduAPI.activeAPI.findCommunicateTypeList)
            }else{
                //学员缺勤原因
                that.loadData(that.curPage,eduAPI.activeAPI.findHolidayTypeList)
            }
        },
        handleClick(tab, event) {
            let that = this
            that.tabIndex = tab.index
            that.loadDataChange()
        },

        //查询各个单元详情
        findDetail(url,dataId){
            let that = this
            let json = {}
            if(that.tabIndex == 0){
                json['gradeId'] = dataId
            }else if(that.tabIndex == 1){
                json['subjectId'] = dataId
            }else if(that.tabIndex == 2){
                json['classTimeId'] = dataId
            }else if(that.tabIndex == 3){
                json['admissionsFromId'] = dataId
            }else if(that.tabIndex == 4){
                json['communicateTypeId'] = dataId
            }else{
                json['holidayTypeId'] = dataId
            }
            console.log(json)
            // return
            common.ajax({
                'url': url,
                'type': "GET",
                'data':json,
                'success': function(data) {
                    console.log(data,'查询校区数据');
                    if (data.data) {
                        that.ruleForm = data.data
                    }
                }
            });
        },

        //新增编辑弹出层
        dialogFormShow(index){
            let that = this
            that.id = index
            if(that.tabIndex === '0'){
                if(!index){
                    that.dialogFormTitle = '新增年级'
                }else{
                    that.dialogFormTitle = '编辑年级'
                    that.findDetail(eduAPI.activeAPI.findGrade,index)
                }
                that.dialogFormLabel = '年级：'
                that.formLabelWidth='70px'
            }else if(that.tabIndex === '1'){
                if(!index){
                    that.dialogFormTitle = '新增科目'
                }else{
                    that.dialogFormTitle = '编辑科目'
                    that.findDetail(eduAPI.activeAPI.findSubject,index)
                }
                that.dialogFormLabel = '科目：'
                that.formLabelWidth='70px'
            }else if(that.tabIndex === '2'){
                if(!index){
                    that.dialogFormTitle = '新增上课时长'
                }else{
                    that.dialogFormTitle = '编辑上课时长'
                    that.findDetail(eduAPI.activeAPI.findClassTime,index)
                }
                that.dialogFormLabel = '上课时长：'
                that.formLabelWidth='100px'
            }else if(that.tabIndex === '3'){
                if(!index){
                    that.dialogFormTitle = '新增招生来源'
                }else{
                    that.dialogFormTitle = '编辑招生来源'
                    that.findDetail(eduAPI.activeAPI.findAdmissionsFrom,index)
                }
                that.dialogFormLabel = '招生来源：'
                that.formLabelWidth='100px'
            }else if(that.tabIndex === '4'){
                if(!index){
                    that.dialogFormTitle = '新增意向沟通方式'
                }else{
                    that.dialogFormTitle = '编辑意向沟通方式'
                    that.findDetail(eduAPI.activeAPI.findCommunicateType,index)
                }
                that.dialogFormLabel = '意向沟通方式：'
                that.formLabelWidth='130px'
            }else if(that.tabIndex === '5'){
                if(!index){
                    that.dialogFormTitle = '新增学员缺勤原因'
                }else{
                    that.dialogFormTitle = '编辑学员缺勤原因'
                    that.findDetail(eduAPI.activeAPI.findHolidayType,index)
                }
                that.dialogFormLabel = '学员缺勤原因：'
                that.formLabelWidth='130px'
            }
            that.dialogFormVisible = true
            parent.window.postMessage("openMask()", "*");
        },

        //新增 编辑弹出层取消
        dialogFormReset(){
            let that = this
            that.$refs['ruleForm'].resetFields();
            that.ruleForm.sort = ''
            that.ruleForm.remarks = ''
            that.dialogFormVisible = false
            parent.window.postMessage("closeMask()", "*");
        },

        //删除
        deleteItem(index,url){
            let that = this;
            let json = {}
            if(that.tabIndex == 0){
                json['gradeId'] = index
            }else if(that.tabIndex == 1){
                json['subjectId'] = index
            }else if(that.tabIndex == 2){
                json['classTimeId'] = index
            }else if(that.tabIndex == 3){
                json['admissionsFromId'] = index
            }else if(that.tabIndex == 4){
                json['communicateTypeId'] = index
            }else{
                json['holidayTypeId'] = index
            }
            parent.window.postMessage("openMask()", "*");
            that.$confirm('确定要删除吗？删除后不可恢复?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                common.ajax({
                    'url':url,
                    'type': "POST",
                    'data':json,
                    'success': function(data) {
                        console.log(data,'删除校区数据');
                        that.$message({
                            showClose: true,
                            type: 'success',
                            message: '删除成功!'
                        });
                        parent.window.postMessage("closeMask()", "*");
                        that.loadDataChange()
                    }
                });
            }).catch(() => {
                that.$message({
                    type: 'info',
                    message: '已取消删除'
                });    
                parent.window.postMessage("closeMask()", "*");      
            });
           
        },
        deleteItems(index){
            let that = this
            if(that.tabIndex == 0){
                that.deleteItem(index,eduAPI.activeAPI.delGrade)
            }else if(that.tabIndex == 1){
                that.deleteItem(index,eduAPI.activeAPI.delSubject)
            }else if(that.tabIndex == 2){
                that.deleteItem(index,eduAPI.activeAPI.delClassTime)
            }else if(that.tabIndex == 3){
                that.deleteItem(index,eduAPI.activeAPI.delAdmissionsFrom)
            }else if(that.tabIndex == 4){
                that.deleteItem(index,eduAPI.activeAPI.delCommunicateType)
            }else{
                that.deleteItem(index,eduAPI.activeAPI.delHolidayType)
            }
        },

        //新增 编辑 弹出层确定
        saveFormData(url){
            let that = this
            let json = {}
            if(!that.id){that.id = ''}
            json['id'] = that.id
            if(that.tabIndex == 0){
                json['gradeName'] = that.ruleForm.gradeName
            }else if(that.tabIndex == 1){
                json['subjectName'] = that.ruleForm.subjectName
            }else if(that.tabIndex == 2){
                json['classTime'] = that.ruleForm.classTime
            }else if(that.tabIndex == 3){
                json['admissionsFrom'] = that.ruleForm.admissionsFrom 
            }else if(that.tabIndex == 4){
                json['communicateType'] = that.ruleForm.communicateType 
            }else{
                json['holidayType'] = that.ruleForm.holidayType 
            }
            json['sort'] = that.ruleForm.sort
            json['remarks'] = that.ruleForm.remarks
            console.log(json,'json')
            // return
            common.ajax({
                'url':url,
                'type': "POST",
                'data':json,
                'success': function(data) {
                    console.log(data,'保存校区数据');
                    that.$message({
                        showClose: true,
                        message: '保存成功',
                        type: 'success'
                    });
                    that.dialogFormReset('ruleForm')
                    that.loadDataChange()
                }
            });
        },
        dialogFormSubmit(formName){
            let that = this
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    if(that.tabIndex == 0){
                        that.saveFormData(eduAPI.activeAPI.saveGrade)
                    }else if(that.tabIndex == 1){
                        that.saveFormData(eduAPI.activeAPI.saveSubject)
                    }else if(that.tabIndex == 2){
                        that.saveFormData(eduAPI.activeAPI.saveClassTime)
                    }else if(that.tabIndex == 3){
                        that.saveFormData(eduAPI.activeAPI.saveAdmissionsFrom)
                    }else if(that.tabIndex == 4){
                        that.saveFormData(eduAPI.activeAPI.saveCommunicateType)
                    }else{
                        that.saveFormData(eduAPI.activeAPI.saveHolidayType)
                    }
                   
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        //分页事件
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.curPage = val
            if(this.tabIndex == 0){
                this.loadData(val,eduAPI.activeAPI.findGradeList)
            }
            
        },
    },
    mounted(){
        this.loadData(this.curPage,eduAPI.activeAPI.findGradeList)
    }
  };
</script>